<template>
	<div>
		<div v-if="ofansnum==0">
			<div class="detailstop">
				<DetailsTop :info='commentInfo' :idx='idx'/>
			</div>
			<div class="startlist">
				<StartList/>
			</div>
			<div class="startreply0">
				<StartReply0/>
			</div>
		</div>
		<div v-else-if="ofansnum>4">
			<OfansDetailsTop :info='commentInfo' :idx='idx'/>
			<div class="startlist">
				<StartList/>
			</div>
			<div class="comment">
				<div v-for="(every,index) in count">
					<!--把数据传递到子组件Comment中-->
					<Comment :info='ofansinfo':index='index' :routeName='routename'/>
				</div>
			</div>
		</div>
		<div v-else>
			<div class="detailstop">
				<DetailsTop :info='commentInfo' :idx='idx'/>
			</div>
			<div class="startlist">
				<StartList/>
			</div>
			<div class="startreply0">
				<StartReplyM/>
			</div>
		</div>
		<!--<div class="persondetails">-->
			<!--把数据传递到子组件Comment中-->
			<!--<Comment :info='commentInfo':index='index' :routeName='routename'/>-->		
		<!--</div>-->
	</div>
</template>

<script>
	import Comment from './comment'
	import DetailsTop from './componentpage/detailstop'
	import OfansDetailsTop from './componentpage/ofansdetailstop'
	import StartList from './componentpage/startlist'
	import StartReply0 from './componentpage/startreply0'
	import StartReplyM from './componentpage/startreplym'
	export default{
		data(){
			return{
				commentInfo:[],
				idx:0,
				routename:'',
				ofansnum:null,
//				index:0,
				count:null
			}
		},
		components:{
			Comment,
			DetailsTop,
			OfansDetailsTop,
			StartList,
			StartReply0,
			StartReplyM
		},
		mounted(){
			this.$axios.get('http://localhost:3000/commentList')
			.then(res => {
				this.commentInfo=res.data;
				//通过传参的方式获取当前id,但是页面一刷新就拿不到数据了,所以利用本地缓存的方式
//				this.idx=this.$route.params.id;
				this.idx=localStorage.getItem('commentidimg');
				this.ofansnum=this.commentInfo[this.idx].ofansdetails.ofansnum;
				this.ofansinfo=this.commentInfo[this.idx].ofansdetails.replyofans.comment;
				this.count=this.ofansinfo.length;
			})
			.catch(error =>{
				console.log(error);
			})
		}
	}
</script>

<style scoped lang="less">
	@current:100rem;
	.startlist{
		padding: 20/@current;
		margin-top: 63/@current;
	}
	.startreply0{
		padding: 20/@current;
		padding-top: 0;
	}
</style>